<template>
  <div class="blog-content-box">
    <div class="article-header-box">
      <div class="article-header">
        <div class="article-title-box">
          <h1>{{ title }}</h1>
        </div>
        <div class="article-info-box">
          <div class="article-bar-top">
            <div class="bar-content">
              <span class="c-gray">置顶</span>
              <span class="time">{{ time|dateTimeFormat }}</span>
              <span class="read-count"> <i class="el-icon-reading" /> {{ read }}</span>
            </div>
          </div>
          <div class="operating">
            <el-button icon="el-icon-edit" @click="handleEdit()" type="text">编辑</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="article">
      <div class="hljs-button" data-title="复制" />
      <mavon-editor
        class="md"
        v-model="content"
        :value="content"
        :subfield="false"
        :default-open="'preview'"
        :toolbars-flag="false"
        :box-shadoww="false"
        :editable="false"
        :scroll-style="false"
        :ishljs="true"
        font-size="16px"
        code-style="tomorrow-night-bright"
      />
    </div>

  </div>
</template>

<script>
import { detailArticle } from '@/api/article'
import { parseTime } from '@/utils'

export default {
  name: 'DetailVue',
  data() {
    return {
      id: '',
      content: '',
      title: '',
      time: '',
      read: ''
    }
  },
  filters: {
    dateTimeFormat(date) {
      return parseTime(date, '{y}年{m}月{d}日 {h}:{i}:{s}')
    }
  },
  created: function() {
    const id = this.$route.params.id
    if (new RegExp('\\w{8}').test(id) && id !== undefined) {
      this.fetchData(id)
    }
  },
  methods: {
    fetchData(id) {
      if (new RegExp('\\w{8}').test(id) && id !== undefined) {
        detailArticle(id).then(response => {
          if (response.code === 20000) {
            this.content = response.payload.content
            this.title = response.payload.title
            this.id = response.payload.hid
            this.time = response.payload.createTime
            this.read = response.payload.read
          }
        })
      }
    },
    handleEdit() {
      const id = this.id
      this.$router.push({ path: '/document/editor', params: { id: id }, query: { id: id }})
    }
  }
}
</script>

<style lang="scss" scoped>
  .blog-content-box {
    position: relative;
    padding: 0 24px 16px;
    background: #fff;

    .article-header-box {
      border-bottom: 1px solid #f5f6f7;
      padding-top: 8px;
      z-index: 9;
      background-color: #fff;

      .article-title-box {
        margin-bottom: 8px;
      }

      .article-info-box {
        position: relative;
        background: #f7f7fc;
        border-radius: 4px;

        .article-bar-top {
          color: #999aaa;
          width: 88%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          line-height: 32px;

          .bar-content {
            margin: 0;

            .c-gray {
              color: #858585;
              margin-right: 20px;
            }

            .time {
              position: relative;
              margin-right: 20px;
            }
          }

        }

        .operating {
          position: absolute;
          top: 0;
          right: 8px;
          line-height: 32px;
          color: #8fb0c9;
          padding: 0 4px;
          font-size: 12px;
          cursor: pointer;
        }

      }
    }

    .article {
      position: relative;
      padding-top: 16px;

      .md {
        min-height: 70px;

        .hljs-button {
          display: none;
          position: absolute;
          right: 4px;
          top: 4px;
          font-size: 12px;
          color: #4d4d4d;
          background-color: white;
          padding: 2px 8px;
          margin: 8px;
          border-radius: 4px;
          cursor: pointer;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
        }
      }
    }
  }
</style>
